<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="Kwh">
    <script src="../js/jquery-3.1.1.js"></script>
    <title></title>
    <style>
        body{
            font: 12px/1.5 arial;
            color: #666;
        }
        ul,p{
            margin: 0;
            padding: 0;
        }
        #star{
            width: 600px;
            margin: 10px auto;
            position: relative;
        }
        #star span,
        #star ul{
            float: left;
            margin: 0 5px;
        }
        #star li{
            list-style-type: none;
            float: left;
            width: 24px;
            height: 24px;
            cursor: pointer;
            background-image: url(../img/star.png);
            background-repeat: no-repeat;
        }
        #star li.on{
            background-position: 0 -28px;
        }
        #star p{

            position: absolute;
            top: 20px;
            width: 160px;
            left: 0;
        }
        #star p em{
            display: block;
            font-style: normal;
            color: #f60;
        }
        #star strong{
            color: #f60;
        }
    </style>
</head>
<body>
    <div id="star">
        <span id="span1">点击星星评分</span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--显示最终评分结果-->
        <span id="span"></span>
        <!--显示评分及评语-->
        <p></p>
    </div>
</body>
</html>
<script>
    
    var star = $('#star');
    var ali = $('li');
    var span1 = $('#span1')
    var span = $('#span');
    var p = $('p');
    var ul = $('ul');
    var isStar = 0;
    var msg = [
        "很不满意",
        "不满意",
        "一般",
        "满意",
        "非常满意"
    ];
    var msg1 = [
        "差得太离谱，与卖家描述的严重不符，非常不满",
        "部分有破损，与卖家描述的不符，不满意",
        "质量一般，没有卖家描述的那么好",
        "质量不错，与卖家描述的基本一致，还是挺满意的",
        "质量非常好，与卖家描述的完全一致，非常满意"
    ];
    
    ali.mouseover(function(){
        // 鼠标移上去先清空li的类名
        ali.removeClass();
        // 获取当前星星的索引
        var i =$(this).index();
        showstar(i);
        // 拼接评语
        p.html('<em><b>' + (i+1)+ '</b>分 ' +
                          msg[i]+ '</em>'
                          +msg1[i] )
        // 评语内容的位置
        p.css('left',span1.width()+ $(this).width()*i+'px')

    })
    
    ali.click(function(){
        // 获取点击的索引
        isStar = $(this).index();
        // 清空评语
        p.html('');
        // 拼接最终评语
        span.html('<strong>'+(isStar+1)+'分</strong>('+msg1[isStar]+')')

    })

    ali.mouseout(function(){
        // 鼠标移开清空类名
        ali.removeClass();
        // 点击的索引执行方法
        showstar(isStar);
        p.html('');
    })



    function showstar(index){
        // console.log(index)  
        // 获取当前的索引让他前面的显示 +1  就和本身一起得到类名
        ali.eq(index+1).prevAll().addClass('on');
        // 如果索引到了最后一个 就让全部的星星显示
        if(index>=4){
            ali.each(function(ev){
            ali.addClass('on');
        });
        
        }
        console.log(index)
        
    }




</script>